<template>
    <div class="stayMessage">
        <div class="user-comments">
            <div class="title">
                留言
            </div>
            <div class="message">
                <el-input v-model="stayValue" type="textarea" style="font-size: 16px;" :autosize="{ minRows: 4, }"
                    placeholder="请输入" />
            </div>

            <div class="send-message">
                <el-button :class="stayValue ? 'active' : ''">
                    <svg-icon name="send" class="svg-style"></svg-icon>
                    <span>
                        发布留言
                    </span>
                </el-button>
            </div>
        </div>
        <!-- 历史留言 -->
        <div class="histor-list">
            <div class="title">
                历史留言
            </div>
            <!-- 留言列表 -->
            <div class="stay-list">
                <div v-for="(message, index) in messageList" :key="index"
                    :class="['message-item', { 'self-message': message.isSelf }]">
                    <!-- 非本人消息，头像在左侧 -->
                    <img src="~/assets/login.png" alt="avatar" class="avatar" v-if="!message.isSelf" />
                    <div class="message-details">
                        <div class="user-info">
                            <div class="user-name">{{ message.name }}</div>
                            <div class="message-time">{{ message.timestamp }}</div>
                        </div>
                        <div class="message-bubble" :class="{ 'self-bubble': message.isSelf }">
                            <span>{{ message.content }}</span>
                        </div>
                    </div>
                    <!-- 本人消息，头像在右侧 -->
                    <img src="~/assets/login.png" alt="avatar" class="avatar" v-if="message.isSelf" />
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref } from 'vue'

const stayValue = ref('')

// 示例留言数据
const messageList = ref([
    {
        avatar: '~/assets/login.png', // 请替换为实际的头像路径
        name: 'Lina (用户)',
        timestamp: '2023/12/12 14:31',
        content: '本次计划合共有 14 名大专学生参与，期望本课程可协助他们建立进阶的编程知识及提升他们编程教学技巧。本学院亦计划为参加者提供实习机会，将学习成果实践於教学之中，共同培养中小学的编程人才。',
        isSelf: false // 表示非本人发送的消息
    },
    {
        avatar: '/src/assets/images/avatar-zhang.png', // 请替换为实际的头像路径
        name: '张老师',
        timestamp: '2023/12/12 14:31',
        content: '本次计划合共有 14 名大专学生参与，期望本课程可协助他们建立进阶的编程知识及提升他们编程教学技巧。本学院亦计划为参加者提供实习机会，将学习成果实践於教学之中，共同培养中小学的才。',
        isSelf: true // 表示本人发送的消息
    },
    {
        avatar: '/src/assets/images/avatar-lina.png', // 请替换为实际的头像路径
        name: 'Lina (用户)',
        timestamp: '2023/12/12 14:31',
        content: '本次计划合共有 14 名大专学生参与，期望本课程可协助他们建立进阶的编程知识及提升他们编程教学技巧。本学院亦计划为参加者提供实习机会，将学习成果实践於教学之中，共同培养中小学的编程人才。',
        isSelf: false
    }
])

</script>


<style lang="less" scoped>
.stayMessage {
    width: 100%;

    .user-comments {
        width: 100%;

        .title {
            font-family: PingFang HK, PingFang HK;
            font-weight: 500;
            font-size: 16px;
            color: #1E2021;
            text-align: left;
            margin-bottom: 20px;
        }

        // 添加 placeholder 样式
        :deep(.el-textarea__inner::placeholder) {
            color: #999999;
            font-size: 16px;
            font-family: PingFang HK, PingFang HK;
            font-weight: 400;
            line-height: 20px;
        }

        :deep(.el-textarea__inner) {
            padding: 15px;
        }

        .send-message {
            margin-top: 20px;

            button {
                background: #D3D3D3;
                border-radius: 0px 0px 0px 0px;
                padding: 16px 25px;
                box-sizing: border-box;

                .svg-style {
                    width: 16px;
                    height: 16px;
                    margin-right: 11px;
                    color: #ffffff;
                }

                span {
                    font-family: PingFang HK, PingFang HK;
                    font-weight: 500;
                    font-size: 16px;
                    color: #FFFFFF;
                }
            }

            button:hover {
                border-color: #D3D3D3;
            }

            .active {
                background: linear-gradient(87deg, #D8393B 0%, #BF1C37 0%, #D65B1D 99%);
                box-shadow: 0px 10px 15px 0px rgba(153, 1, 1, 0.2);
                border-radius: 0px 0px 0px 0px;
                border: none;
            }
        }
    }

    .histor-list {
        width: 100%;
        margin-top: 40px;

        .title {
            font-family: PingFang HK, PingFang HK;
            font-weight: 500;
            font-size: 16px;
            color: #1E2021;
        }

        .stay-list {
            width: 100%;
            border-top: 1px solid #E9E9E9;
            margin-top: 20px;
            padding: 20px 1px;
            box-sizing: border-box;

            .message-item {
                display: flex;
                align-items: flex-start;
                /* 顶部对齐 */
                margin-bottom: 20px;
                width: 100%;

                /* 本人消息靠右对齐 */
                &.self-message {
                    justify-content: flex-end;
                }

                .avatar {
                    width: 60px;
                    height: 60px;
                    border-radius: 50%;
                    flex-shrink: 0;
                    border: 1px solid red;
                    /* 防止头像缩小 */
                }

                /* 非本人消息，头像在左侧，气泡右侧留白 */
                &:not(.self-message) .avatar {
                    margin-right: 16px;
                }

                /* 本人消息，头像在右侧，气泡左侧留白 */
                &.self-message .avatar {
                    margin-right: 150px;
                }

                .message-details {
                    display: flex;
                    flex-direction: column;
                    max-width: calc(100% - 48px - 16px);
                    flex-grow: 1;
                    padding-top: 20px;
                    box-sizing: border-box;
                }

                &.self-message {
                    justify-content: flex-end;

                    .message-details {
                        margin-left: 194px;
                    }
                }

                .user-info {
                    display: flex;
                    align-items: center;
                    margin-bottom: 12px;
                    width: 100%;
                    justify-content: flex-start;

                    .user-name {
                        font-family: PingFang HK, PingFang HK;
                        font-weight: 500;
                        font-size: 14px;
                        color: #1E2021;
                        margin-right: 10px;
                    }

                    .message-time {
                        font-family: PingFang HK, PingFang HK;
                        font-weight: 400;
                        font-size: 12px;
                        color: #999999;
                    }
                }

                .message-bubble {
                    background: #EAF3FE;
                    /* 非本人消息气泡颜色 */
                    border-radius: 10px 10px 10px 0;
                    /* 左侧消息气泡圆角 */
                    padding: 12px 16px;
                    font-family: PingFang HK, PingFang HK;
                    font-weight: 400;
                    font-size: 14px;
                    color: #1E2021;
                    line-height: 20px;
                    word-wrap: break-word;
                    max-width: 70%;
                    /* 限制气泡最大宽度 */
                    min-width: 50px; // 最小宽度，防止内容过短导致气泡过窄
                }

                /* 本人消息气泡样式 */
                &.self-bubble {
                    background: linear-gradient(87deg, #D8393B 0%, #BF1C37 0%, #D65B1D 99%);
                    /* 本人消息气泡渐变色 */
                    color: #FFFFFF;
                    border-radius: 10px 10px 0 10px;
                    /* 右侧消息气泡圆角 */
                }
            }
        }
    }


}
</style>